<template>
  <div class="home">
    <!-- 板块大图，可能会做轮播 -->
    <div class="banner">
      <img src="../lvystatic/images/qy004.jpg" />
    </div>
    <!-- <div class="zanchor"  container=".con">
        <Anchor :affix="true" :show-ink="false">
          <AnchorLink href="#rob" title="抢" />
          <AnchorLink href="#play" title="玩" />
          <AnchorLink href="#cease" title="住" />
          <AnchorLink href="#travel" title="游" />
          <AnchorLink href="#tour" title="行" />
          <AnchorLink href="#eat" title="吃" />
          <AnchorLink href="#buy" title="买" />
        </Anchor>
      </div> -->
    <!-- 锚点模块 -->
    <div class="zanchor" ref="zanchor" @click="clickactive($event)">
      <a :href="item.href" v-for="(item,index) in hreflist" :key="index">{{item.text}} 
         <span ref="spam"></span>
      </a>
    </div>
    <!-- 限时特惠吃喝玩乐等模块 -->
    <div class="con">
      <div class="contain">
        <div class="con1">
          <div class="title">
            <div class="tleft" id="rob" ref="rob"><i class="iconfont icon-xianshi" style="font-weight:bold;"></i> 限时特惠</div>
            <div class="more"><a href="#">MORE>></a></div>
          </div>
          <div class="prolist">
            <ul>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy005.jpg" /></a>
                </div>
                <div class="tit1"><a href="#">广西德天跨国大瀑布+通灵大峡谷2日游+通灵大峡谷2日游</a></div>
                <div class="tit2">
                  <div class="price">￥<span>88</span></div>
                  <div class="time">15天 10时 10分 50秒</div>
                </div>
              </li>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy006.jpg" /></a>
                </div>
                <div class="tit1"><a href="#">象鼻山</a></div>
                <div class="tit2">
                  <div class="price">￥<span>45</span></div>
                  <div class="time">15天 10时 10分 50秒</div>
                </div>
              </li>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy007.jpg" /></a>
                </div>
                <div class="tit1"><a href="#">芦笛岩</a></div>
                <div class="tit2">
                  <div class="price">￥<span>55</span></div>
                  <div class="time">15天 10时 10分 50秒</div>
                </div>
              </li>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy008.jpg" /></a>
                </div>
                <div class="tit1"><a href="#">广西德天跨国大瀑布+通灵大峡谷2日游</a></div>
                <div class="tit2">
                  <div class="price">￥<span>208</span></div>
                  <div class="time">15天 10时 10分 50秒</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="con2">
          <div class="title">
            <div class="tleft" id="play"><i class="iconfont icon-jingdian"></i> 景区门票</div>
            <div class="more"><a href="#">MORE>></a></div>
            <div class="tlist">
              <ul>
                <li><a href="#">公园</a></li>
                <li><a href="#">游乐场</a></li>
                <li><a href="#">河流</a></li>
                <li><a href="#">湖泊</a></li>
                <li><a href="#">温泉</a></li>
                <li><a href="#">海洋馆</a></li>
                <li><a href="#">蔬果采摘</a></li>
                <li><a href="#">宗教寺庙</a></li>
                <li><a href="#">城市观光</a></li>
                <li><a href="#">水世界</a></li>
                <li><a href="#">山岳</a></li>
                <li><a href="#">古村落</a></li>
                <li><a href="#">古镇</a></li>
              </ul>
            </div>
          </div>
          <div class="prolist">
            <ul>
              <li class="li1">
                <a href="#"><img src="../lvystatic/images/qy009.jpg" /></a>
              </li>
              <li class="li2">
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy010.jpg" /></a>
                </div>
                <div class="tit">
                  <div class="tit1"><a href="#">漓江景区</a></div>
                  <div class="tit2">￥<span>150</span></div>
                </div>
              </li>
              <li class="li2">
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy011.jpg" /></a>
                </div>
                <div class="tit">
                  <div class="tit1"><a href="#">青秀山</a></div>
                  <div class="tit2">￥<span>20</span></div>
                </div>
              </li>
              <li class="li2">
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy012.jpg" /></a>
                </div>
                <div class="tit">
                  <div class="tit1"><a href="#">德天跨国大瀑布</a></div>
                  <div class="tit2">￥<span>88</span></div>
                </div>
              </li>
              <li class="li2">
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy010.jpg" /></a>
                </div>
                <div class="tit">
                  <div class="tit1"><a href="#">漓江景区</a></div>
                  <div class="tit2">￥<span>150</span></div>
                </div>
              </li>
              <li class="li2">
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy011.jpg" /></a>
                </div>
                <div class="tit">
                  <div class="tit1"><a href="#">青秀山</a></div>
                  <div class="tit2">￥<span>20</span></div>
                </div>
              </li>
              <li class="li2">
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy012.jpg" /></a>
                </div>
                <div class="tit">
                  <div class="tit1"><a href="#">德天跨国大瀑布</a></div>
                  <div class="tit2">￥<span>88</span></div>
                </div>
              </li>
              <li class="li2">
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy011.jpg" /></a>
                </div>
                <div class="tit">
                  <div class="tit1"><a href="#">青秀山</a></div>
                  <div class="tit2">￥<span>20</span></div>
                </div>
              </li>
              <li class="li2">
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy012.jpg" /></a>
                </div>
                <div class="tit">
                  <div class="tit1"><a href="#">德天跨国大瀑布</a></div>
                  <div class="tit2">￥<span>88</span></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="con3">
          <div class="title">
            <div class="tleft" id="cease"><i class="iconfont icon-zhusu"></i> 酒店住宿</div>
            <div class="more"><a href="#">MORE>></a></div>
            <div class="tlist">
              <ul>
                <li><a href="#">南宁</a></li>
                <li><a href="#">钦州</a></li>
                <li><a href="#">崇左</a></li>
                <li><a href="#">防城港</a></li>
                <li><a href="#">贵港</a></li>
                <li><a href="#">来宾</a></li>
                <li><a href="#">北海</a></li>
                <li><a href="#">玉林</a></li>
                <li><a href="#">国际 · 港澳台酒店</a></li>
              </ul>
            </div>
          </div>
          <div class="prolist">
            <div class="left">
              <ul>
                <li>
                  <div class="img">
                    <a href="#"><img src="../lvystatic/images/qy013.jpg" /></a>
                  </div>
                  <div class="tit">
                    <div class="tit1"><a href="#">南宁邕江宾馆</a></div>
                    <div class="tit2">￥<span>88</span></div>
                  </div>
                </li>
                <li>
                  <div class="img">
                    <a href="#"><img src="../lvystatic/images/qy014.jpg" /></a>
                  </div>
                  <div class="tit">
                    <div class="tit1"><a href="#">维也纳酒店</a></div>
                    <div class="tit2">￥<span>88</span></div>
                  </div>
                </li>
                <li>
                  <div class="img">
                    <a href="#"><img src="../lvystatic/images/qy015.jpg" /></a>
                  </div>
                  <div class="tit">
                    <div class="tit1"><a href="#">南宁永凯春晖公寓...</a></div>
                    <div class="tit2">￥<span>88</span></div>
                  </div>
                </li>
                <li>
                  <div class="img">
                    <a href="#"><img src="../lvystatic/images/qy016.jpg" /></a>
                  </div>
                  <div class="tit">
                    <div class="tit1"><a href="#">南宁金旺角国际大酒店</a></div>
                    <div class="tit2">￥<span>88</span></div>
                  </div>
                </li>
                <li>
                  <div class="img">
                    <a href="#"><img src="../lvystatic/images/qy017.jpg" /></a>
                  </div>
                  <div class="tit">
                    <div class="tit1"><a href="#">南宁银河大酒店</a></div>
                    <div class="tit2">￥<span>88</span></div>
                  </div>
                </li>
                <li>
                  <div class="img">
                    <a href="#"><img src="../lvystatic/images/qy018.jpg" /></a>
                  </div>
                  <div class="tit">
                    <div class="tit1"><a href="#">南宁永恒朗悦酒店</a></div>
                    <div class="tit2">￥<span>88</span></div>
                  </div>
                </li>
                <li>
                  <div class="img">
                    <a href="#"><img src="../lvystatic/images/qy019.jpg" /></a>
                  </div>
                  <div class="tit">
                    <div class="tit1"><a href="#">南宁逸臣阳光酒店</a></div>
                    <div class="tit2">￥<span>88</span></div>
                  </div>
                </li>
                <li>
                  <div class="img">
                    <a href="#"><img src="../lvystatic/images/qy020.jpg" /></a>
                  </div>
                  <div class="tit">
                    <div class="tit1"><a href="#">南宁阳光国际酒店</a></div>
                    <div class="tit2">￥<span>88</span></div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="right"><img src="../lvystatic/images/qy021.jpg" /></div>
          </div>
        </div>
        <div class="con4">
          <div class="title">
            <div class="tleft" id="travel"><i class="iconfont">&#xe661;</i> 跟团游</div>
            <div class="more"><a href="#">MORE>></a></div>
            <div class="tlist">
              <ul>
                <li><a href="#">亲子体验</a></li>
                <li><a href="#">主题乐园</a></li>
                <li><a href="#">温泉季</a></li>
                <li><a href="#">乡村情怀</a></li>
                <li><a href="#">风景名胜</a></li>
              </ul>
            </div>
          </div>
          <div class="prolist">
            <ul>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy022.jpg" /></a>
                </div>
                <div class="tit"><a href="#">【长寿之乡】&lt;巴马百鸟岩+仁寿山庄+长寿村探秘&gt; 2日跟团游品瑶族特色餐-长桌宴</a></div>
                <div class="price">￥<span>352</span></div>
              </li>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy023.jpg" /></a>
                </div>
                <div class="tit"><a href="#">北海银滩+北部湾广场+南珠魂+百年老街1日跟团游法式骑楼 十里银滩 天然沐场</a></div>
                <div class="price">￥<span>132</span></div>
              </li>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy024.jpg" /></a>
                </div>
                <div class="tit"><a href="#">北海涠洲岛+鳄鱼山景区+石螺口海滩+圣母堂1日跟团游浪漫涠洲环岛一日游</a></div>
                <div class="price">￥<span>550</span></div>
              </li>
            </ul>
          </div>
        </div>
        <div class="con4">
          <div class="title">
            <div class="tleft" id="tour"><i class="iconfont">&#xe657;</i> 自由行</div>
            <div class="more"><a href="#">MORE>></a></div>
            <div class="tlist">
              <ul>
                <li><a href="#">亲子体验</a></li>
                <li><a href="#">主题乐园</a></li>
                <li><a href="#">温泉季</a></li>
                <li><a href="#">乡村情怀</a></li>
                <li><a href="#">风景名胜</a></li>
              </ul>
            </div>
          </div>
          <div class="prolist">
            <ul>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy022.jpg" /></a>
                </div>
                <div class="tit"><a href="#">【长寿之乡】&lt;巴马百鸟岩+仁寿山庄+长寿村探秘&gt; 2日跟团游品瑶族特色餐-长桌宴</a></div>
                <div class="price">￥<span>352</span></div>
              </li>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy023.jpg" /></a>
                </div>
                <div class="tit"><a href="#">北海银滩+北部湾广场+南珠魂+百年老街1日跟团游法式骑楼 十里银滩 天然沐场</a></div>
                <div class="price">￥<span>132</span></div>
              </li>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy024.jpg" /></a>
                </div>
                <div class="tit"><a href="#">北海涠洲岛+鳄鱼山景区+石螺口海滩+圣母堂1日跟团游浪漫涠洲环岛一日游</a></div>
                <div class="price">￥<span>550</span></div>
              </li>
            </ul>
          </div>
        </div>
        <div class="con5">
          <div class="title">
            <div class="tleft" id="eat"><i class="iconfont" style="font-weight:bold;">&#xe664;</i> 美食</div>
            <div class="more"><a href="#">MORE>></a></div>
            <div class="tlist">
              <ul>
                <li><a href="#">火锅</a></li>
                <li><a href="#">自助餐</a></li>
                <li><a href="#">特色小吃</a></li>
              </ul>
            </div>
          </div>
          <div class="prolist">
            <ul>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy025.jpg" /></a>
                </div>
                <div class="tit">
                  <div class="tit1"><a href="#">回头客农庄</a></div>
                  <div class="tit2">￥<span>85</span>/人</div>
                </div>
              </li>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy026.jpg" /></a>
                </div>
                <div class="tit">
                  <div class="tit1"><a href="#">回头客农庄</a></div>
                  <div class="tit2">￥<span>85</span>/人</div>
                </div>
              </li>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy027.jpg" /></a>
                </div>
                <div class="tit">
                  <div class="tit1"><a href="#">回头客农庄</a></div>
                  <div class="tit2">￥<span>85</span>/人</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="con5">
          <div class="title">
            <div class="tleft" id="buy"><i class="iconfont">&#xe69a;</i> 特产</div>
            <div class="more"><a href="#">MORE>></a></div>
          </div>
          <div class="prolist">
            <ul>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy025.jpg" /></a>
                </div>
                <div class="tit">
                  <div class="tit1"><a href="#">回头客农庄</a></div>
                  <div class="tit2">￥<span>85</span>/人</div>
                </div>
              </li>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy026.jpg" /></a>
                </div>
                <div class="tit">
                  <div class="tit1"><a href="#">回头客农庄</a></div>
                  <div class="tit2">￥<span>85</span>/人</div>
                </div>
              </li>
              <li>
                <div class="img">
                  <a href="#"><img src="../lvystatic/images/qy027.jpg" /></a>
                </div>
                <div class="tit">
                  <div class="tit1"><a href="#">回头客农庄</a></div>
                  <div class="tit2">￥<span>85</span>/人</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 一键返回顶部 -->
    <BackTop :height="300" :bottom="200" :right="100">
      <div class="top">回到顶部</div>
    </BackTop>
    <!-- 分页模块 -->
    <div class="pages">
      <a href="/home.vue" class="pagehead">首页</a>
      <!-- <router-link to="/" class="pagehead">首页</router-link> -->
      <Page :total="50" prev-text="上一页" next-text="下一页" />
      <router-link to="/" class="pageweiba">尾页</router-link>
    </div>
  </div>
</template>

<script>
  let rob;
  let robTop;
  export default {
    name: 'HelloWorld',
    data() {
      return {
        hreflist: [{
          href: '#rob',
          text: '抢'
        }, {
          href: '#play',
          text: '玩'
        }, {
          href: '#cease',
          text: '住'
        }, {
          href: '#travel',
          text: '游'
        }, {
          href: '#tour',
          text: '行'
        }, {
          href: '#eat',
          text: '吃'
        }, {
          href: '#buy',
          text: '买'
        }]
      }
    },
    created() {
    },
    mounted() {
      // console.log(this.$refs.rob);
      window.addEventListener('scroll', this.handleScroll)
      rob = this.$refs.rob;
      robTop = rob.getBoundingClientRect().y;
      // console.log(robTop);
      if (robTop > 190) {
        this.$refs.zanchor.style.bottom = 20 + "px";
      } else {
        this.$refs.zanchor.style.bottom = 500 + "px";
      }
      // console.log(this.$refs.zanchor)
      //  console.log(rob.getBoundingClientRect());
      // >290 >-110 >-310 >-800 >-1100 >-1400 >-1700 >-2000
      //<290 -10  -400 -900 -1400 -1800 -2000
    },
    methods: {
      handleScroll() {
        // console.log(rob.getBoundingClientRect());
        robTop = rob.getBoundingClientRect().y;
        // console.log(robTop);
        if (robTop > 190) {
          this.$refs.zanchor.style.bottom = 27 + "rem";
        } else {
          this.$refs.zanchor.style.bottom = 50 + "rem";
        }
      },
      clickactive(evet) {
        console.log(event); //获取被点击的当前元素
        // 判断是a标签还是span标签
          event.target.classList.toggle('active');
          // event.target.classList.toggle('sonactive')
          // event.target.span.classList.toggle('sonactive')
        // event.target.add('active');
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .item {
    width: 100%;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
  .home {
    width: 100%;
  }
  .banner {
    width: 100%;
  }
  /* .banner img { 
    } */
  a {
    color: #333;
  }
  /* 回到顶部按钮样式 */
  .top {
    padding: 10px;
    background: rgba(0, 153, 229, .7);
    color: #fff;
    text-align: center;
    border-radius: 3px;
  }
  /* 锚点导航样式 */
  .zanchor {
    position: fixed;
    /* left: 10%;
      bottom: 20px; */
    border-left: 1px dashed #ccc;
    box-sizing: border-box;
    transform: translate(4rem, 25rem);
    transition: all 0.8s;
  }
  .zanchor a {
    display: block;
    margin: 7px;
    font-weight: bold;
    padding: 5px;
    position: relative;
  }
  .zanchor span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    position: absolute;
    top: 8px;
    left: -12px;
  }
  .active {
    color: #03baa2;
  }
  .zanchor a:first-child {
    margin-top: -2px;
  }
  .zanchor a:first-child span {
    background: #03baa2;
  }
  .zanchor a:hover,
  a:active {
    color: #03baa2;
  }
  .zanchor .sonactive {
    background: #03baa2;
  }
  /* 分页样式 */
  .pages {
    width: 480px;
    margin: 0 auto;
    color: #ccc;
    position: relative;
    text-align: center;
  }
  .pagehead {
    /* padding: 5px; */
    width: 50px;
    height: 25px;
    line-height: 25px;
    position: absolute;
    left: 35px;
    top: 5px;
    background: #03baa2;
    color: #fff;
    border-radius: 4px
  }
  .pageweiba {
    width: 50px;
    height: 25px;
    line-height: 25px;
    position: absolute;
    right: 40px;
    top: 5px;
  }
</style>
